$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'waterself/tclientinfosubself/list',
        postData:{dept : ''},
        datatype: "json",
        colModel: [			
			{ label: '设备号', name: 'deviceId', index: 'device_id',  key: true },
			{ label: '表卡编号', name: 'clientId', index: 'client_id' },
			{ label: '客户名称', name: 'clientName', index: 'client_name' },
			//{ label: '性别', name: 'clientSex', index: 'client_sex', width: 80,hidden:true },
			//{ label: '年龄', name: 'clientAge', index: 'client_age', width: 80,hidden:true },
			{ label: 'IMEI', name: 'clientIdCard', index: 'client_id_card' },
            { label: 'SIM卡号', name: 'desc16', index: 'desc16'},
            { label: '设备地址', name: 'clientDeviceInfo', index: 'device_id'
                ,formatter: function(value, options, row){
                    if (value == null) return "";
                    var cellvalue = value.masterNum + '-' + value.slaveNum + '-' + value.cardNum + '-' + value.routeNum + '-' + value.meterNum;
                    return cellvalue;
                }},
            { label: '小区名称', name: 'memo1', index: 'memo1', width: 180,hidden:true },
            { label: '详细公安地址', name: 'proName', index: 'pro_name'
                ,formatter: function(value, options, row){
                    if (value == null) return "";

                    var cellvalue = row.memo1+'-'+ row.proName + '-'+ row.buildNum + '-' + row.unitNum + '-' + row.houseNum;
                    return cellvalue;
                }
            },
			//{ label: '楼号', name: 'buildNum', index: 'build_num'},
			//{ label: '单元', name: 'unitNum', index: 'unit_num'},
			//{ label: '门牌号码', name: 'houseNum', index: 'house_num'},

           // {label:'账本',name:'accountNo',index:'account_no'},
           // {label:'表卡编号',name:'searchNo',index:'search_no'},
            //{label:'电话',name:'phone',index:'phone'},
            //{label:'表号',name:'meterCode',index:'meter_code'},
            //{label:'封号',name:'stampCode',index:'stamp_code'},
            //{label:'口径',name:'calibre',index:'calibre'},
            {label:'用户性质',name:'clientType',index:'client_type'},
           // {label:'设备代码',name:'deviceCode',index:'device_code'},
            //{label:'小楼号',name:'buildingNo',index:'building_no'},
            //{label:'楼层',name:'floorNo',index:'floor_no'},
            //{label:'其他码',name:'otherNo',index:'other_no'},

			{ label: '备注2', name: 'memo2', index: 'memo2', width: 80,hidden:false },
			{ label: '备注3', name: 'memo3', index: 'memo3', width: 80,hidden:true },
			{ label: '二维码', name: 'qrcode', index: 'qrCode', width: 80,hidden:true },
            //{ label: 'desc4', name: 'desc4', index: 'desc4', width: 80,hidden:false },
        ],
		viewrecords: true,
        height: $(window).height() > 385 ?  $(window).height() - 160 : 385,
        rowNum: 55,
		rowList : [10,20,30,50,80,100,200],
        rownumbers: true, 
        rownumWidth: 55,
        autowidth:true,
        //multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        ondblClickRow: function(rowid, iRow, iCol, e){
            $("#jqGrid").jqGrid('resetSelection');
            //$("#jqGrid").jqGrid('setSelection',$("#selRow").val(),false);
            $("#jqGrid").jqGrid('setSelection',rowid);

            vm.openInfoLayer($("#jqGrid").jqGrid("getRowData", rowid));

            $('#myTab a:first').tab('show');
        },
        onSelectRow: function (rowid, status) {
            vm.openInfoLayer($("#jqGrid").jqGrid("getRowData", rowid));

            $('#myTab a:first').tab('show');
        },
        gridComplete:function(){
        	//隐藏grid底部滚动条
        	//$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            //iframe自适应
            $(window).on('resize', function() {
                var $content = $('.content');
                $content.height($(this).height() - 154);
                $content.find('iframe').each(function() {
                    $(this).height($content.height());
                });
            }).resize();
        }
    });


    $(function () {
        $('#inputClear').click(function () {
            $('input')[0].value = "";
            vm.q.value="";
        })
    });

    $('#datetimepicker1,#datetimepicker2').datetimepicker({
        format: 'YYYY.MM.DD',
        locale: moment.locale('zh-cn')
    });

});


var vm = new Vue({
	el:'#rrapp',
	data:{
		showList: true,
		title: null,
		tClientInfo: {},
        newpage : false,
        searchKeyDictInfo: {},
        q:{
            key:null,
            value:null,
            dept:null
        },
        op:{
            ch:false,
        },
        clientMeterTypeInfo:{},
        clientUseInfo:{},
        clientFixAddrInfo:{},
        clientCalibre:{},
        clientDeviceInfo:{},

        progressbar : 0,
        currPer:0,

        startTime: '',
        endTime: ''
    },
	methods: {
        getSearchKeyDict: function(){
            $.get(baseURL + "sys/dict/list",{name:"qkey_tclientinfo"}, function(r){
                vm.searchKeyDictInfo = r.page.list;
            });

            //字典
            $.get(baseURL + "sys/dict/list",{name:"dict_device_type"}, function(r){
                vm.clientMeterTypeInfo = r.page.list;
            });

            $.get(baseURL + "sys/dict/list",{name:"dict_use_type"}, function(r){
                vm.clientUseInfo = r.page.list;
            });

            $.get(baseURL + "sys/dict/list",{name:"dict_fix_addr"}, function(r){
                vm.clientFixAddrInfo = r.page.list;
            });

            $.get(baseURL + "sys/dict/list",{name:"dict_calibre"}, function(r){
                vm.clientCalibre = r.page.list;
            });
        },
        query: function () {
            if(vm.q.value != null && vm.q.value != ""
                && (vm.q.key == null || vm.q.key == "")){
                alert('请选择查询条件!');
                return;
            }
            vm.newpage=true;

			vm.reload();
		},
		getInfo: function(deviceId){
			$.get(baseURL + "waterself/tclientinfosubself/info/"+deviceId, function(r){
                vm.tClientInfo = r.tClientInfo;

                $('#datetimepicker1').datetimepicker('setDate',vm.tClientInfo.desc1 != "" ? vm.tClientInfo.desc1 : moment(Date.now()).format("YYYY-MM-DD"));
                $('#datetimepicker2').datetimepicker('setDate',vm.tClientInfo.desc6 != "" ? vm.tClientInfo.desc6 : moment(Date.now()).format("YYYY-MM-DD"));
            });
		},
        outxls: function(){
            var total = $("#jqGrid").jqGrid('getGridParam', 'records') + "";
            var dept = vm.q.dept==null ? "" : vm.q.dept+  "";
            location.href = baseURL
                + "waterself/tclientinfosubself/export?params="
                + encodeURIComponent(JSON.stringify({key:vm.q.key,value:vm.q.value,dept:dept,limit:total,page:"1"}));

            //console.log(decodeURIComponent(url));
            //location.href = url;
        },
        openInfoLayer :function(event){
            vm.getInfo(event.deviceId);

            $.get(baseURL + "waterself/tdeviceinfosubself/info/"+event.deviceId, function(r){
                vm.clientDeviceInfo = r.tDeviceInfo;
            });

            layer.open({
                type: 1,
                offset: '50px',
                skin: 'layui-layer-molv',
                title: "详细信息【"+event.clientName + "】【" +event.proName+"】",
                area: ['600px', '550px'],
                shade: 0,
                shadeClose: false,
                content: jQuery("#clientInfoLayer"),
                btn: ['确定'],
                btn1: function (index) {
                     layer.close(index);
                }
            });
        },
		reload: function () {
			vm.showList = true;
			var page = $("#jqGrid").jqGrid('getGridParam','page');
            if(vm.newpage){page = "1";}
            $("#jqGrid").jqGrid('setGridParam',{
                postData:{'key': vm.q.key,'value':vm.q.value,'dept':vm.q.dept},
                page:page
            }).trigger("reloadGrid");
        },
        dateInit: function() {
            now = new Date()
            now.setMinutes(now.getMinutes() - 1)
            startDate = new Date()
            startDate.setDate(startDate.getDate() - 89)
            $('#datetimepicker1').datetimepicker({
                startDate: startDate,
                endDate: new Date(),
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 'month',
                forceParse: 0,
                minView: "day",
                format: 'yyyy/mm/dd hh'
            })

            $('#datetimepicker1').datetimepicker('setDate', now)
            this.startTime = $('#datetimepicker1').val()
            $('#datetimepicker1').datetimepicker()
                .on('hide', (ev) => {
                    this.startTime = $('#datetimepicker1').val()
                })
        },
    },
    mounted: function() {
        //this.dateInit()
    },
    created: function (){
        this.getSearchKeyDict();
    }
});